<template>
  <transition name="modal-warn">
    <div class="warn-wrap" v-show="showWarn">

      <div class="warn-box">
        <div class="title">{{title}}</div>
        <div class="warn-con">{{content}}</div>
        <div class="warn-btn" v-if="type == 1">
          <div class="left-btn" @click="closeBtn">
            <button type="button" class="cancel">{{cancelText}}</button>
          </div>
          <div class="right-btn" @click="confirmBtn">
            <button type="button" class="sure">{{confirmText}}</button>
          </div>
        </div>
        <div class="warn-btn" v-if="type == 2">
          <div class="confirm-box" @click="confirmBtn">
            <button type="button" class="confirm">{{confirmText}}</button>
          </div>
        </div>
      </div>

    </div>
  </transition>
</template>

<script>
  export default {
    props: {
      value: {},
      type: {
        type: String,
        default: "2"
      },
      title: {
        type: String,
        default: ''
      },
      content: {
        type: String,
        default: ''
      },
      cancelText: {
        type: String,
        default: '取消'
      },
      confirmText: {
        type: String,
        default: '立即拨打'
      },
    },
    data() {
      return {
        showWarn: false
      }
    },
    methods: {
      closeBtn() {
        this.showWarn = false;
        this.$emit('cancel');
      },
      confirmBtn() {
        this.showWarn = false;
        this.$emit('confirm');
      },
    },
    mounted() {
      this.showWarn = this.value;
    },
    watch: {
      value(newVal, oldVal) {
        this.showWarn = newVal;
      },
      showWarn(val) {
        this.$emit('input', val);
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../assest/mixin";

  .warn-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    .warn-box {
      margin-top: 4.747rem;
      position: relative;
      .wh(7.2rem, 4rem);
      background: rgba(255, 255, 255, 1);
      border-radius: 0.16rem;
      box-sizing: border-box;
      .title {
        margin-top: 0.64rem;
        text-align: center;
        .size-color(0.427rem, #333);
        border-top-left-radius: 0.16rem;
        border-top-right-radius: 0.16rem;
      }
      .warn-con {
        .fj(center, center);
        margin: 0 auto;
        .wh(85%, 1.76rem);
        .size-color(0.427rem, #333);
      }
      .warn-btn {
        display: flex;
        .wh(100%, 1.187rem);
        border-top: 1px solid rgba(230, 230, 230, 1);
        .left-btn {
          width: 3.667rem;
          height: 1.173rem;
          border-right: 1px solid rgba(230, 230, 230, 1);
          .cancel {
            border-bottom-left-radius: 0.16rem;
            width: 100%;
            height: 1.173rem;
            line-height: 1.173rem;
            font-size: 0.44rem;
            color: #999;
            background: #FFF;
          }
        }
        .right-btn {
          width: 3.653rem;
          height: 1.173rem;
          .sure {
            border-bottom-right-radius: 0.16rem;
            width: 100%;
            height: 1.173rem;
            line-height: 1.173rem;
            font-size: 0.427rem;
            color: rgba(60, 175, 255, 1);
            background: #FFF;
          }
        }
        .confirm-box {
          width: 100%;
          height: 1.173rem;
          .confirm {
            border-bottom-right-radius: 0.16rem;
            border-bottom-left-radius: 0.16rem;
            width: 100%;
            height: 1.173rem;
            line-height: 1.173rem;
            font-size: 0.427rem;
            color: rgba(60, 175, 255, 1);
            background: #FFF;
          }
        }
      }
    }
  }

  .modal-enter, .modal-leave {

    opacity: 0;
  }

  .modal-warn-transition {
    transition: all .3s ease;
  }

  .modal-warn-enter .modal-warn-alert,
  .modal-warn-leave .modal-warn-alert {
    transform: scale(1.1);
  }

  .modal-warn-transition {
    transition: all .3s ease;
  }
</style>
